<!--
 * @Author: chenchao
 * @Date: 2022-08-13 15:40:05
 * @LastEditors: chenchao
 * @LastEditTime: 2022-08-17 14:50:51
 * @Description: 
-->
<template>
  <div id="app">
    <a @click="() => {status = 1}">待付款</a>
    <a @click="() => {status = 2}">待发货</a>
    <a @click="() => {status = 3}">待收货</a>
    
  <qqq v-if="status == 1"/>
  <abc v-if="status == 2"/>
  <ccc v-if="status == 3"/>
  </div>
  
</template>
<style>
#app {
  margin: 0 auto;
  width: 400px;
  height: 200px;
    border: 1px  red  solid;
}
#app a {
  margin: 0 auto;
  height: 50px;
   line-height: 50px;
  color: aquamarine;
 display: inline-block;
 width: 132px;
   border: 1.5px  pink  solid;
}
#app a:hover{
background-color: blueviolet;
}

#app div {
  color: brown;
  text-align: center;

}
#app .zi{
    line-height: 150px;

} 

</style>
<script>
import qqq from './qqq.vue'
import abc from './abc.vue'
import ccc from './ccc.vue'
export default {
  components: {qqq, abc, ccc},
  data() {
    return {
      dataList: [],
      status: 0,
    };
  },
  methods: {
    clickMethods(code) {
      this.$router.push({
        name: "qqq",
        query: {
          eee: code,
        },
      });
    },
    shiShi(code1) {
      this.$router.push({
        name: "abc",
        query: {
          rrr: code1,
        },
      });
    },
  },
};
</script>
